<template>
  <el-dialog append-to-body :title="title" :visible.sync="open" width="800px" :before-close="close">
    <el-form ref="form" v-loading="loading" :model="form" :rules="rules" label-width="150px" class="demo-ruleForm">

      <el-form-item v-if="form.pid > 0" label="父级" prop="pid">
        <el-select v-model="form.pid" :disabled="true" placeholder="父级" clearable style="width:100%" allow-create filterable default-first-option>
          <el-option label="顶级项目" :value="0" />
          <el-option v-for="(dict, index) in options" :key="index" :label="dict.project_name" :value="dict.id" />
        </el-select>
      </el-form-item>

      <el-form-item v-else label="父级" prop="pid">
        <el-input v-model="form.project_name" placeholder="请输入顶级项目名称" />
      </el-form-item>

      <el-form-item v-if="form.pid > 0" label="名称(项目或委托人)" prop="project_name">
        <el-select v-model="form.project_name" placeholder="名称(项目或委托人)" clearable style="width:100%">
          <el-option v-for="(dict, index) in providerList" :key="index" :label="dict.account_code" :value="dict.account_code" />
        </el-select>
      </el-form-item>

      <el-form-item v-if="form.pid > 0" prop="config_ids">
        <span slot="label">
          库位选择
        </span>
        <el-cascader
          ref="cascader"
          v-model="form.config_ids"
          class="not-add"
          filterable
          :options="warehouseList"
          :props="props"
          collapse-tags
          clearable
          @change="saveLog($event)"
        >
          <template slot-scope="{ node, data }">
            <el-tooltip v-if="data.address_description" class="item" effect="dark" :content="data.address_description" placement="top-start">
              <span>{{ data.name }}</span>
            </el-tooltip>
          </template>
        </el-cascader>
      </el-form-item>

      <el-form-item v-if="form.pid > 0" prop="employees">
        <span slot="label">
          相关员工
        </span>
        <el-select v-model="form.employees" multiple collapse-tags style="width: 100%;" placeholder="请选择">
          <el-option v-for="item in employees" :key="item.id" :label="item.username" :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="项目描述" prop="describe">
        <el-input v-model="form.describe" type="textarea" placeholder="请输入项目描述" autocomplete="off" clearable />
      </el-form-item>
      <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
        <el-col :span="24">
          <el-button type="primary" size="medium" @click="submitForm('form')">{{ title }}</el-button>
          <el-button size="medium" @click="close()">取消</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
import { project, projectAdd, projectEdit, getWarehouse, getProjecte, getProvider } from '@/api/storehouse'
import { getEmployee } from '@/api/tenant'
export default {
  name: 'AddEdit',
  props: {
    open: {
      type: Boolean
    },
    form: {
      type: Object
    },
    title: {
      type: String
    }
  },
  data() {
    return {
      rules: {
        pid: [
          { required: true, message: '请选择父级', trigger: 'change' }
        ],
        project_name: [
          { required: true, message: '请选择项目或委托人', trigger: 'change' }
        ]
      },
      options: {},
      employees: [],
      warehouseList: [],
      props: { multiple: true, emitPath: true },
      editChid: true,
      loading: true,
      providerList: {}
    }
  },
  watch: {
    'open': function(newValue, oldValue) {
      if (newValue === true) {
        this.getProject()
      }
    },
    title() {
      if (this.title === '添加') {
        this.editChid = true
        getWarehouse().then(response => {
          if (response.code === 10000) {
            this.warehouseList = response.data.all
            this.loading = false
          }
        })
      }
    },
    form() {
      if (this.title === '编辑') {
        if (!this.form.children) {
          this.editChid = true
          getProjecte(this.form.id).then(response => {
            if (response.code === 10000) {
              this.warehouseList = response.data.all
              this.form.config_ids = response.data.checked
              this.loading = false
            }
          })
        } else {
          this.editChid = false
          this.loading = false
        }
      }
    }
  },
  created() {
    this.getEmployee()
  },
  mounted() {
  },
  methods: {
    clList() {
      var arr = this.form.project_KW
      this.WList = this.warehouseList
      this.WList.forEach(item => {
        item.children.forEach(item2 => {
          if (item2.children) {
            item2.children.forEach(item3 => {
              arr.forEach(item4 => {
                if (item3.value === item4) {
                  delete item2.children
                }
              })
            })
          }
        })
      })
      this.WList.forEach((item, index) => {
        item.children.forEach((item2, index) => {
          if (!item2.children) {
            delete item.children[index]
          }
        })
      })
      this.WList.forEach((item, index) => {
        item.children.forEach((item2, index) => {
          item.children = item.children.filter(item => item)
        })
      })
      console.log(this.WList)
    },
    saveLog(event) {
      // console.log(this.form)
      console.log(event)
    },
    submitForm(formName) {
      const that = this
      // this.clList()
      // return
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (that.title === '添加') {
            this.add()
          } else {
            this.edit()
          }
        } else {
          return false
        }
      })
    },
    getEmployee() {
      getEmployee().then(response => {
        if (response.code === 10000) {
          this.employees = response.data
        }
      })
      // getWarehouse().then(response => {
      //   if (response.code === 10000) {
      //     this.warehouseList = response.data.all
      //     this.WList = response.data
      //   }
      // })
    },
    add() {
      const that = this
      if (this.form.pid > 0) {
        if (!this.form.config_ids) {
          this.$message.error('请选择库位')
          return
        }
      }

      this.providerList.forEach(item => {
        if (item.account_code === this.form.project_name) {
          this.form.provider_id = item.id
        }
      })
      var arr = []
      this.optList.forEach(item => {
        arr.push(item.id)
      })
      if (arr.indexOf(this.form.pid) === -1) {
        this.form.p_name = this.form.pid
        this.form.pid = 0
      }
      projectAdd(that.form).then(response => {
        if (response.code === 10000) {
          that.$message.success(response.message)
          that.$parent.getList()
          that.$emit('update:open', false)
          this.loading = true
        }
      })
    },
    edit() {
      const that = this
      if (this.editChid) {
        if (this.form.config_ids.length < 1) {
          this.$message.error('请选择库位')
          return
        }
      }
      this.providerList.forEach(item => {
        if (item.account_code === this.form.project_name) {
          this.form.provider_id = item.id
        }
      })
      var arr = []
      this.optList.forEach(item => {
        arr.push(item.id)
      })
      if (arr.indexOf(this.form.pid) === -1) {
        this.form.p_name = this.form.pid
        this.form.pid = 0
      }
      projectEdit(that.form).then(response => {
        if (response.code === 10000) {
          that.$message.success(response.message)
          that.$parent.getList()
          that.$emit('update:open', false)
          this.loading = true
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    close() {
      this.$emit('update:open', false)
      this.loading = true
    },
    getProject() {
      const that = this
      project().then(response => {
        if (response.code === 10000) {
          that.options = response.data
          that.optList = response.data
        }
      })
      getProvider().then(response => {
        if (response.code === 10000) {
          that.providerList = response.data
        }
      })
      this.loading = false
    }
  }
}
</script>

